<template>
	<view class="content">
		<view class="body">

			<!-- 顶部bar indexTopBar-->
			<view style="background-color: #fff;" class="indexTopBar clickEffect">
				<uni-section type="circle" title="自定义Banner">
					<template v-slot:right>
						<vab-icon class="indexTopBarSetIcon " :icon="['fas', 'cog']"
							@click="indexTopBarSetIconClick"></vab-icon>
					</template>
					<view class="grid-body">
						<uni-grid :column="4" :showBorder="false">
							<uni-grid-item style="" v-for="item2 in indexTopBar">
								<view class="grid-item-box" @tap.stop="changeGrid(item2)">

									<uni-badge class="uni-badge-left-margin" :text="item2.meta.badge"
										absolute="rightTop" size="small">
										<view :class="{ 'vabiconborder ':true,'error': !item2.isok ,'bg-blue':true}">
											<vab-icon class="vab-icon clickEffect" @click=""
												:icon="['fas', item2.meta.icon?item2.meta.icon:'dizzy']"
												:style="{color:'#fff'}"></vab-icon>
										</view>
									</uni-badge>
									<text class="text">{{item2.meta.title}}</text>
								</view>
							</uni-grid-item>

						</uni-grid>
					</view>
				</uni-section>

			</view>



			<!-- 搜索框 -->
			<view style="margin-top: 20rpx;display: flex;">
				<view style="width: 240rpx;" @click="addCustomer">
					<button class="login-btn cu-btn block bg-blue">添加客户</button>
				</view>
				<view style="flex: 1;margin-left: 20rpx;">
					<uni-easyinput ConfirmType="search" type="text" suffixIcon="search" confirmType="search"
						v-model="query" placeholder="学生姓名/家长手机号" @iconClick="iconClick" @confirm="iconClick">
					</uni-easyinput>
				</view>
			</view>

			<!-- 展示客户 -->
			<view class="customerList" v-if="customerList.length>0">
				<!-- <uni-section title="符合条件的客户" subTitle="1111111111"></uni-section> -->
				<view style="display: flex;  justify-content: space-between;">
					<view class="text"> 符合条件的客户</view>
					<view style="justify-content: center;display: flex;" @click="customerIndex=null;customerList=[]">
						<!--  -->
						<view class="bg-blue center round" style="font-size: 12px;margin: 5px 0px;padding: 2px 10px;">
							<uni-icons type="closeempty" style="color: #fff;" size="12"></uni-icons>收起
						</view>

					</view>
				</view>

				<customerListIetm :customer-list="customerList" @clickCustomer="clickCustomer"></customerListIetm>
			</view>
			<!-- 待办任务 -->
			<view class="base">
				<uni-section title="待办事项" type="circle" style="padding-bottom: 20rpx;">
					<view slot="right">
						<text style="color: #2979ff;font-size: 24rpx;" @click="setUpDoToListType"
							class="margin-right-sm">设置</text>
						<text style="color: #2979ff;font-size: 24rpx;" @click="AlldotoList">全部数据</text>
					</view>
					<blues-empty img="msg" v-if="dotoList.length==0">
					</blues-empty>

					<view v-for="(item,index) in dotoList" class="padding-xs ">
						<view v-if="index<3">
							<view style="display: flex;  justify-content: space-between;">
								<view>{{item.title}}</view>
								<view style="color: #999;font-size: 24rpx;">{{item.createTime}}</view>
							</view>

							<view style="color: #999;font-size: 24rpx;">{{item.content}}</view>
						</view>
					</view>
					<button class="login-btn cu-btn block bg-blue " @click="createUpDoToList">新建待办</button>
				</uni-section>
			</view>
			<!-- 数据展示 -->
			<view class="base" style="padding: 10rpx;padding-bottom: 20rpx;">
				<uni-row class="demo-uni-row" :gutter="20">
					<uni-col :span="8" v-for="item in indexData">
						<view class="dataShow-uni-col">
							<view class="title font-12">{{ item.parentId }}</view>
							<view class="stutitle">{{ item.menuName }}</view>
						</view>
					</uni-col>
				</uni-row>
			</view>

			<!-- 全局搜索 -->
			<view style="display: flex;" class="bg-white padding-sm radius margin-top-sm">

				<view style="flex: 1;margin-left: 20rpx;">
					<uni-easyinput ConfirmType="search" type="text" suffixIcon="search" confirmType="search"
						v-model="retrievalPhone" placeholder="11位手机号" @iconClick="retrieval" @confirm="retrieval">
					</uni-easyinput>
				</view>
				<view style="width: 240rpx;" class="margin-left-sm" @click="retrieval">
					<button class="login-btn cu-btn block bg-blue">系统检索</button>
				</view>
			</view>

			<view class="bg-white padding-sm" v-if="retrievalData.length>0">
				<view style="display: flex; justify-content: space-between;border-bottom: solid .5px #c9c9c9;">
					<view>手机号</view>
					<view>{{retrievalData[0].parentsInfo.phone}}</view>
				</view>
				<view
					style="display: flex; justify-content: space-between;border-bottom: solid .5px #c9c9c9;margin-top: 10rpx;">
					<view>学生姓名</view>
					<view>{{retrievalData[0].student.name}}</view>
				</view>
				<view
					style="display: flex; justify-content: space-between;border-bottom: solid .5px #c9c9c9;margin-top: 10rpx;">
					<view>是否会员</view>
					<view>{{retrievalData[0].isVip==1?'是':'不是'}}</view>
				</view>
				<view
					style="display: flex; justify-content: space-between;border-bottom: solid .5px #c9c9c9;margin-top: 10rpx;">
					<view>中心名称</view>
					<view>{{retrievalData[0].sysOrgModel.orgName}}</view>
				</view>
				<view
					style="display: flex; justify-content: space-between;border-bottom: solid .5px #c9c9c9;margin-top: 10rpx;">
					<view>录入时间</view>
					<view>{{retrievalData[0].createTime}}</view>
				</view>

			</view>
		</view>



		<uni-popup ref="setUpDoToListType" type="bottom">
			<view class="bg-white radius " style="margin-bottom: 50px;">
				<uni-section title="设置待办数据类型" type="circle" style="padding-bottom: 20rpx;">
					<uni-data-checkbox v-model="queryForm.isOk_EQ" :localdata="doToListType"
						@change="getMyList"></uni-data-checkbox>
				</uni-section>
			</view>
		</uni-popup>





		<!-- 创建待办 -->
		<uni-popup ref="createUpDoToList" type="bottom">
			<view class="bg-white radius " style="margin-bottom: 50px;">
				<uni-section title="新增待办" type="circle" style="padding: 20rpx;">

					<uni-forms>
						<uni-forms-item label="执行人" label-width="150rpx">

							<uni-data-checkbox v-model="doToForm.executorId" multiple
								:localdata="createUserNameList"></uni-data-checkbox>
						</uni-forms-item>
						<uni-forms-item label="标题" label-width="200rpx">
							<uni-easyinput v-model="doToForm.title"></uni-easyinput>
						</uni-forms-item>
						<!-- <uni-forms-item label="关联用户" label-width="200rpx">
							doToForm.customerId

						</uni-forms-item>
						<uni-forms-item label="截止时间" label-width="200rpx">
							doToForm.deadline
						</uni-forms-item>
						<uni-forms-item label="提醒时间" label-width="200rpx">
							doToForm.tipTime
						</uni-forms-item> -->
						<uni-forms-item label="提醒内容" label-width="200rpx">
							<uni-easyinput v-model="doToForm.content" type="textarea"></uni-easyinput>

						</uni-forms-item>

					</uni-forms>
					<button class="login-btn cu-btn block bg-blue " @click="createUpDoToList2">确认</button>
				</uni-section>
			</view>
		</uni-popup>
		<addCustomer @refresh="init" ref="addCustomer"></addCustomer>
		<indexTopBarSet @refreshIndexTopBar="init" ref="indexTopBarSet"></indexTopBarSet>
	</view>
</template>

<script>
	import customerListIetm from "@/pages/marketing/customer/customerListIetm.vue"
	import indexTopBarSet from '@/pages/common/indexTopBarSet.vue'

	import {
		getList
	} from "@/api/system/index";
	import {
		doUpdate,
		getMyList,
		getMyListCount,
		doInsert
	} from "@/api/system/todolist/SysToDoListManagementApi";

	import {
		getListByPhoneFromAllOrg
	} from "@/api/marketing/customer/CustomerManagementApi";

	import addCustomer from '@/pages/marketing/customer/addCustomerInfo.vue'
	import {
		pictureProcessing,
		getColorByCode,
		getcommon
	} from '@/utils/common.js'
	import {
		getListByParentOrStudent
	} from '@/api/customer/index.js'
	import storage from '@/utils/storage'
	import {
		dateToAge,
		formatDate,
		isNull
	} from '../utils/validate'


	export default {
		components: {

			addCustomer,
			indexTopBarSet,
			customerListIetm
		},
		data() {
			return {
				retrievalPhone: "",
				retrievalData: [],
				query: "", //查询的关键词
				customerList: [], //客户列表
				customerIndex: null,
				current: 0,
				swiperDotIndex: 0,
				indexData: [],
				indexTopBar: [],
				dict: {},
				dotoList: [],
				queryForm: {
					isOk_EQ: 0,
					isIgnore_EQ: "",
				},
				doToForm: {
					// 设置默认值
					version: 0
				},
				doToListType: [{
						value: 3,
						text: '训练计划'
					},
					{
						value: 4,
						text: '沟通提醒'
					},
					{
						value: 0,
						text: '全部'
					},
				],
				createUserNameList: []
			}

		},
		onLoad() {

			this.init()
		},
		mounted() {

			this.dict.relationship = this.$getDictList("relationship");

		},
		methods: {

			async retrieval() {
				this.loading = true
				let {
					data,
					msg
				} = await getListByPhoneFromAllOrg({
					"query": this.retrievalPhone
				})
				this.retrievalData = data
				console.log(this.retrievalData);
			},
			async createUpDoToList2() {
				var asdfasdf = JSON.parse(JSON.stringify(this.doToForm))

				asdfasdf.executorId = asdfasdf.executorId.toString()
				if (!isNull(asdfasdf.id)) {
					const {
						success,
						msg
					} = await doUpdate(asdfasdf);

				} else {
					const {
						success,
						msg
					} = await doInsert(asdfasdf);

				}
				this.getMyList()

			},
			createUpDoToList() {
				this.$refs.createUpDoToList.open()
			},
			setUpDoToListType() {
				this.$refs.setUpDoToListType.open()
			},
			AlldotoList() {
				uni.navigateTo({
					url: "/pages/common/doToList/doToList"
				})
			},
			/**
			 * 设置首页卡片
			 */
			indexTopBarSetIconClick() {
				this.$refs['indexTopBarSet'].open()
			},
			/**
			 * 根据code获取颜色代码
			 * @param {Object} code
			 */
			getColor(code) {
				return {
					background: getColorByCode(code)
				}
			},
			addCustomer(customerId) {
				this.$refs["addCustomer"].open();
			},

			go(url) {
				this.$tab.navigateTo(url)
			},

			dateToAge(date) {
				return dateToAge(date)
			},
			/**
			 * 设置顶部bar
			 */
			clickIndexTopBarSet() {

			},
			init() {
				this.createUserNameList = getcommon('createUserNameList')
				for (let s of this.createUserNameList) {
					s.text = s.realName
					s.value = s.id
				}
				console.log(this.createUserNameList);
				this.data = storage.get('user')
				this.indexTopBar = storage.get('indexTopBar')
				this.getIndexData()

			},

			clickBannerItem(item) {

			},
			changeSwiper(e) {
				this.current = e.detail.current
			},
			changeGrid(e) {
				console.log(e);
				let url = "/pages/" + e.component

				url = url.replace('views/modules/', "");
				if (e.meta.title == '会员信息') {
					url = '/pages/marketing/customer/index2?isVip=1'
				}
				uni.navigateTo({
					url: url
				})
			},
			getimg(data) {
				return pictureProcessing(data)
			},

			/**
			 * 搜索客户
			 */
			iconClick() {
				this.getListByParentOrStudent()
			},

			/**
			 * 按条件查询客户
			 */
			async getListByParentOrStudent() {
				this.customerIndex = null
				this.customerList = []
				const {
					data
				} = await getListByParentOrStudent({
					query: this.query
				})

				this.customerList = data

			},

			getIndexData() {
				this.getIconData()
				this.getMyList()
			},
			async getMyList() {
				const {
					data
				} = await getMyList(this.queryForm)
				this.dotoList = data
			},
			async getIconData() {
				let asdfasdfasdf = this.getCurrentMonthRange()
				let aa = {
					"status_time": null,
					"end_time": null,
					"howManyDays": '1',
					"type": '月'
				}
				aa.status_time = asdfasdfasdf[0] + " 00:00:00"
				aa.end_time = asdfasdfasdf[1] + " 23:59:59"
				const {
					data
				} = await getList(aa);

				for (const datum of data.iconList) {
					if (datum.tips == "kp") {
						this.indexData.push(datum)
					}
				}
			},
			getCurrentMonthRange() {
				const currentDate = new Date();
				const currentMonth = currentDate.getMonth();
				const currentYear = currentDate.getFullYear();
				const startDate = new Date(currentYear, currentMonth, 1);

				const nextMonth = currentMonth + 1;
				const nextYear = nextMonth > 11 ? currentYear + 1 : currentYear;
				const endDate = new Date(nextYear, nextMonth, 0);

				return [
					formatDate(startDate),
					formatDate(endDate)
				];
			},


		}
	}
</script>

<style lang="scss">
	.daiban {
		padding: 20rpx;
	}

	page {
		background: linear-gradient(to bottom, $uni-color-primary, $uni-bg-color-grey 40%); // background-size: 100% 400px;
		height: 100%;
		// width: 100%;

	}

	.createrDoListButton {
		margin: 20rpx;
		background-color: $uni-color-primary;
		color: $uni-text-color-inverse
	}

	.indexTopBar {
		background-color: $uni-bg-color;
		border-radius: $uni-border-radius-lg;
	}

	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
		color: $uni-text-color;
	}

	.demo-uni-row {
		// margin-top: 10rpx;

		.demo-uni-col {
			padding: 10rpx 0px;
		}

		.dataShow-uni-col {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 100%;
			margin-top: 20rpx;

			.stutitle {
				margin-top: 10rpx;
				color: #8f8f8f;
				font-size: $uni-font-size-sm;
			}

			.title {
				font-size: $uni-font-size-lg;
				font-weight: bold;
			}
		}
	}



	.customerInfoPopup {
		background-color: #f5f6f7;
		margin-bottom: 100rpx;
		padding: 20rpx;
		border-top-right-radius: 5px;
		border-top-left-radius: 5px;
	}

	.content {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 50px;

		.body {

			padding: 20rpx;
			// margin-bottom: 200rpx;

			.customerList {
				margin-top: 20rpx;

				.text {
					font-size: $uni-font-size-base;
					color: $uni-text-color-grey;
					margin: 10rpx 0;
				}


			}
		}
	}

	.customerCard {
		border-radius: $uni-border-radius-lg;
		// height: 140rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		display: flex;

		.img2 {
			flex: 1;
			width: 140rpx;
			height: 140rpx;
			padding: 10rpx;
			border-radius: $uni-border-radius-circle;
		}

		.img3 {
			flex: 5;
			width: 300rpx;
			height: 300rpx;
			padding: 10rpx;
			border-radius: $uni-border-radius-circle;
		}

		.customerInfo {
			padding: 10rpx;
			flex: 5;
			color: $uni-color-title;
			display: block;

			.top {
				display: flex;

				.name {
					font-size: 30rpx;
					font-weight: bold;
					display: flex;

					.vip {
						margin-right: 10rpx;
						color: #ffdc00;
						font-weight: bold;
						border: 1px solid #ffdc00;
						padding: 0px 5px;
					}

				}


			}


			.bottom {
				.phone {
					margin-top: 10rpx;
					color: #8f8f8f;

				}

				.sex {
					color: #8f8f8f;
				}

				.age {
					// margin-left: 10rpx;
					color: #8f8f8f;
				}


			}
		}
	}


	/* 定义动画关键帧 */
	@keyframes fadeIn {
		0% {
			opacity: 0;
			transform: translateX(-20px);
		}

		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

	/* 应用动画到列表项 */
	/* 应用动画到列表项 */
	.list-item {
		opacity: 0;
		animation: fadeIn 0.5s ease forwards;
	}

	uni-image {
		width: 120rpx;
		height: 120rpx;
	}

	.uni-image-big {
		width: 300rpx;
		height: 300rpx;
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// padding: 0 15px;
	}

	.vab-icon {
		font-size: 48rpx;
	}

	.vabiconborder {
		width: 80rpx;
		height: 80rpx;
		// padding: 10rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: $uni-border-radius-lg;
		// background-color: $uni-color-primary;

		.error {
			background-color: $uni-text-color-grey;
		}
	}

	.indexTopBarSetIcon {
		font-size: 32rpx;
		color: $uni-text-color-grey;
	}

	.customercaozuo {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: $uni-text-color-grey;
		margin-right: 20rpx;
	}

	.phoneicon {
		font-size: 32rpx;
	}
</style>